<template>
  <div class="search-city-input">  
    <div class="input-wrap" :style="barter == true ? 'width: calc(100% - 43px)' : ''">
      <i class="iconfont search-icon icon-sousuo"></i>
      <input type="text" placeholder="输入城市名或拼音" class="search-input" v-model="keyword" @focus="response"  @keyup.enter="search" />
    </div>
    <div class="cancel-btn" @click="cancel">取消</div>
   <div class="city-search-result" v-if="show">
       <ul>
           <li v-for="(t , index) in list" :key="index">{{t.name}}</li>
       </ul>

        <div class="empty-result" v-if="tips">
            <img src="./images/bg.png" alt="" />
            <p>没有找到匹配的城市</p>
        </div>
   </div>
  </div>
  <div></div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'

export default {
  name:'SearchBox',
   props:{
        CitiesList:{
            type:[Object,Array]
        }
    },
  setup(props) {
    const state = reactive({
      keyword:'',
      barter:false,
      time:null,
      show:false,
      list:[],
      tips:false
    });
    const response = ()=>{
      state.barter=true
    
    }
    const cancel = ()=>{
      state.barter=false
      state.show=false
    }

    

    const search = ()=>{
     if (state.keyword =='') return
     state.show=true
     state.list=props.CitiesList
     if (state.time) {
       clearTimeout(state.time)
     }
     state.time=setTimeout(()=>{
        state.list=state.list.filter(val =>{
          if (val.name.indexOf(state.keyword) >-1 || val.pinyin.indexOf(state.keyword) >-1) {
             state.tips=false
              return val
          }else if (val.name.indexOf(state.keyword) !=-1 || val.pinyin.indexOf(state.keyword) !=-1) {
             state.tips=true
          }
        })
     },100)
    }

    watch(()=>state.keyword,()=>{
      if (state.keyword=='') {
          state.list=null,
          state.tips=true
      }
    })

    return {
      ...toRefs(state),
      response,
      cancel,
      search
    }
  }
   
}
</script>
<style lang="less" scoped>
.search-city-input {
  height: 49px;
  width: 100%;
  padding: 9.5px 15px;
  background-color: #f4f4f4;
  position: fixed;
  top: 44px;
  z-index: 2000;


  .input-wrap {
    background-color: #fff;
    position: relative;
    display: inline-block;
    border-radius: 3px;
    width: 100%;
    height: 30px;
    

    .search-icon {
      position: absolute;
      left: 7px;
      top: 0;
      line-height: 30px;
      font-size: 15px;
      color: #797d82;
    }

    .search-input {
      position: absolute;
      left: 30px;
      top: 0;
      height: 30px;
      width: calc(100% - 65px);
      border: 0;
      
    }

    input::-webkit-input-placeholder {
      color: #c3c6c9;
    }
  }

  .cancel-btn {
    width: 43px;
    position: absolute;
    display: inline-block;
    text-align: right;
    font-size: 14px;
    line-height: 30px;
  }
}
 .city-search-result {
    top: 50px;
    left: 0px;
    background-color: white;
    height: calc(100vh - 49px);
    width: 100vw;
    overflow-y: auto;
    position: absolute;
    
    ul{
    padding-left: 15px;

    li {
    height: 44px;
    position: relative;
    line-height: 44px;
    color: #191a1b;
    font-size: 13px;
    border-bottom: 1px solid #ededed;
     }
}

 .empty-result {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    z-index: 9999;
    img {
      width: 90px;
      margin: auto;
    }
    p {
      color: #bdc0c5;
      font-size: 14px;
    }
  }

}


</style>